<template>
  <div class="containner">
    <div class="stepContent">
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item ref="name" label="模型名称" name="name">
          <a-input v-model:value="formState.name" placeholder="请输入模型名称" />
        </a-form-item>
        <!-- <a-form-item label="备注" name="beizhu">
          <a-input v-model:value="formState.beizhu" placeholder="请输入备注" />
        </a-form-item> -->
      </a-form>

        <div class="table">
        <a-radio-group name="radioGroup" v-model:value="opt_type" class="driveType">
          <a-radio value="standard">标准驱动选择</a-radio>
          <a-radio value="customize">自定义上传驱动</a-radio>
        </a-radio-group>
        <standdrive @selectDrive="selectDrive" v-if="opt_type == 'standard'" />
        <customDriver @selectDrive="selectDrive" v-else />

        <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 4 }">
          <a-form-item ref="name" label="驱动名称" name="name" style="margin-left: 16px">
            <a-input v-model:value="drive_name" placeholder="驱动名称" disabled />
          </a-form-item>
        </a-form>
        <a-row class="caozuo">
          <a-button type="primary" @click.stop="nextSubmit">下一步</a-button>
          <a-button style="margin-left: 10px" @click.stop="cancel">取消</a-button>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import standdrive from './standdrive/index.vue';
  import customDriver from './customDriver/index.vue';
  import { defineComponent, reactive, ref, toRefs, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { creatmodelDrive, updatemodelDrive } from '/@/api/sys/gateway/gateway';
  import { useMessage } from '/@/hooks/web/useMessage';
  export default defineComponent({
    components: { standdrive, customDriver },
    props: {
      info: {
        type: Object,
        defalut: {},
      },
    },
    emits: ['nextStep'],
    setup(prop: any, context) {
      const { createMessage } = useMessage();
      const current = ref(0);
      const driveType = ref('1');
      const state = reactive({
        tableData: [],
        selectedRowKeys: [],
        opt_type: 'customize',
        real_opt_type: 'customize',
        selectconnect_type: '',
        connect_type: '', //驱动类型
        device_mode_id: '', //模型id
        drive_id: '',
        drive_name: '',
      });
      const formState = reactive({
        name: '',
        beizhu: '',
      });
      //选择驱动
      function selectDrive(e) {
        state.drive_id = e.id;
        //选择的确定还没提交状态
        state.selectconnect_type = e.connect_type;
        state.drive_name = e.name;
        state.real_opt_type = state.opt_type;
        createMessage.success('已选择驱动');
      }
      onMounted(() => {
        if (prop.info) {
          let info: any = JSON.parse(prop.info);
          formState.name = info.name;
          state.connect_type = info.connect_type;
          state.selectconnect_type = info.connect_type;
          state.device_mode_id = info.id;
          state.drive_name = info.drive_name;
          state.drive_id = info.drive_id;
        } else {
          state.opt_type = 'standard';
          state.real_opt_type = 'standard';
        }
      });

      //form校验
      const rules = {
        name: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
      };
      //下一步
      const nextSubmit = () => {
        if (state.drive_name == '') {
          createMessage.warning('请输入模型名称');
          return false;
        }
        if (state.drive_id == '') {
          createMessage.warning('请选择驱动');
          return false;
        }
        if (state.device_mode_id == '') {
          creatmodelDrive({
            device_mode_name: formState.name,
            drive_id: state.drive_id,
            opt_type: state.real_opt_type,
          }).then((e) => {
            if (e.error_code == 400) {
              createMessage.warning(e.message);
              return false;
            }
            context.emit('nextStep', {
              connect_type: state.selectconnect_type,
              device_mode_id: state.device_mode_id,
              drive_id: state.drive_id,
            });
            createMessage.success('绑定驱动成功');
          });
        } else {
          updatemodelDrive({
            id: state.device_mode_id,
            device_mode_name: formState.name,
            drive_id: state.drive_id,
            opt_type: state.real_opt_type,
          }).then((e) => {
            if (e.error_code == 400) {
              createMessage.warning(e.message);
              return false;
            }
            context.emit('nextStep', {
              connect_type: state.selectconnect_type,
              device_mode_id: state.device_mode_id,
              drive_id: e.drive_id,
            });
            createMessage.success('绑定驱动成功');
          });
        }
      };
      const router = useRouter();
      //取消
      const cancel = () => {
        router.go(-1);
      };
      return {
        selectDrive,
        cancel,
        nextSubmit,
        current,
        formState,
        rules,
        labelCol: { span: 2 },
        wrapperCol: { span: 7 },
        ...toRefs(state),
        driveType,
      };
    },
  });
</script>
<style lang="less" scoped>
  .containner {
    background-color: #fff;
    overflow: hidden;
    height: 100%;

    .table {
      padding: 20px 45px;
      box-sizing: border-box;

      .caozuo {
        margin: 30px 0px 30px;
      }

      .driveType {
        margin-bottom: 25px;
        margin-top: 20px;
        padding-left: 20px;
        box-sizing: border-box;
        font-weight: 500;
      }

      .search_table {
        width: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
</style>
